<template>
  <!-- 主体大框 -->
  <div class="main">
    <!-- 中间大按钮 -->
    <div class="icon-button" >
      <img ref="img" src="../../static/icon/fork.png"  @click="buttonEvent"/>
    </div>

    <!-- 底部小tab -->
    <div class="tab">
      <div v-for="(tab,index) in tabbarlist" :key="index"  :class="[index%2==0?'tab-arear-left':'tab-arear-right']">
        <img :src="'../../'+tab.iconPath" class="tab-img" @click="switchTo(tab.pagePath)"/>
        <div class="text">{{tab.text}}</div>
      </div>
    </div>
  </div>
</template>
<script>
  import tabbarjson from '@/app.json'
  export default{
    data(){
      return{
        tabbarlist: tabbarjson.tabBar.list
      }
    },
    computed:{

    },
    onLoad(){
      console.log(this.tabbarlist[0].iconPath)
    },
    methods :{
      switchTo(e){
        wx.switchTab({
          url: '/'+e
        })
      },
      buttonEvent(){
        console.log("反射前");
        this.$emit('buttonEvent')
      }
    }
  }
</script>

<style>
  .main{
    width: 100%;
    height: 200rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    /* border: #000000 1rpx solid; */
  }
  .tab{
    width: 100%;
    height: 130rpx;
    border-radius: 30rpx 30rpx 0 0;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #ff8000;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
  }

  .icon-button{
    width: 120rpx;
    height: 120rpx;
    border: rgba(255, 255, 255, 1) 10rpx solid;
    position: absolute;
    top: 4rpx;
    left: calc(50% - 70rpx);
    border-radius: 50%;
    background-color: #ff8000;
    z-index: 100;

  }
  .icon-button > img{
    margin: 30rpx;
    width: 60rpx;
    height: 60rpx ;
  }

  .tab-arear-left {
    width: 100rpx;
    height: 130rpx;
    margin-left: 50rpx;
  }

.tab-arear-right {
    width: 100rpx;
    height: 130rpx;
    margin-right: 50rpx;
  }
  .tab-img{
    width: 60rpx;
    height: 60rpx;
    margin: 20rpx 20rpx 0;
  }

  .text{
    width: 100%;
    height: 30rpx;
    font-size: 28rpx;
    color: #FFFFFF;
    text-align: center;
  }
</style>
